<template>
    <div>
        <SuperTable ref="table" path="/project/index" :params="params" :columns="columns">
            <Button slot="header-left" type="primary" to="/project/list/edit">新增项目</Button>
            <div slot="header-right">
                <Form ref="filter" :model="filter" inline>
                    <FormItem label="关键词">
                        <Input v-model="filter.keywords" clearable placeholder="如：重庆刘德华" style="width: 240px;" />
                    </FormItem>
                    <FormItem label="巡演" prop="tour_id">
                        <Select v-model="filter.tour_id" clearable style="width: 150px">
                            <Option v-for="item in tourLists" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="分类" prop="category_id">
                        <Select v-model="filter.category_id" clearable style="width: 90px">
                            <Option v-for="item in categories" :value="item.id" :key="item.id">{{ item.name }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="上架状态" prop="shelf_status">
                        <Select v-model="filter.shelf_status" clearable style="width: 80px">
                            <Option :value="1">上架</Option>
                            <Option :value="0">下架</Option>
                        </Select>
                    </FormItem>
                    <Button type="primary" @click="handlFilter">筛选</Button>
                </Form>
            </div>
        </SuperTable>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
import TableRows from '@/components/utils/table-rows.vue';

export default {
    components: {
        SuperTable,
        TableRows
    },
    data() {
        return {
            tourLists: [],
            filter: {
                keywords: '',
                tour_id: null,
                category_id: null,
                shelf_status: null,
            },
            params: {
                keywords: '',
                tour_id: null,
                category_id: null,
                shelf_status: null,
                page: 1,
                pageSize: 10
            },
            columns: [
                {
                    title: '基本信息',
                    minWidth: 250,
                    render: (h, params) => {
                        return h(TableRows, {
                            props: {
                                src: params.row.img || '/static/images/default_avatar.png'
                            }
                        }, [
                            h('p',params.row.project_name),
                            h('p',[
                                h('span',{style:{color:'green'}}, params.row.category ? '#'+params.row.category.name : ''),
                                h('span',{style:{color:'red',marginLeft:'5px'}},params.row.tour ? '#'+params.row.tour.name : '')
                            ])
                        ])
                    }
                },
                {
                    title: '价格',
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`票面：${params.row.min_price}起`),
                            h('p',`商家：${params.row.partner_min_price}起`)
                        ])
                    }
                },
                {
                    title: '库存',
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`直售：${params.row.stocks_direct}`),
                            h('p',`代拍：${params.row.stocks_agent}`)
                        ])
                    }
                },
                {
                    title: '已售',
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',`直售：${params.row.sales_direct}`),
                            h('p',`代拍：${params.row.sales_agent}`)
                        ])
                    }
                },
                {
                    title: '售卖模式',
                    render: (h, params) => {
                        let sale_mode_text = [];
                        params.row.sale_mode.map(item => {
                            if (item == 'direct') sale_mode_text.push('直售');
                            if (item == 'agent') sale_mode_text.push('代拍');
                        })
                        return h('span', sale_mode_text.length > 0 ? sale_mode_text.join('，') : '');
                    }
                },
                {
                    title: '创建时间&更新时间',
                    minWidth: 60,
                    render: (h, params) => {
                        return h(TableRows,[
                            h('p',params.row.created_at),
                            h('p',params.row.updated_at)
                        ])
                    }
                },
                {
                    title: '是否开售',
                    render: (h, params) => {
                        return h('span', params.row.is_sale == 1 ? '已开售' : '未开售');
                    }
                },
                {
                    title: '上架状态',
                    maxWidth: 100,
                    render: (h, params) => {
                        let disabled_status = false;
                        if (params.row.concerts_count == 0 || params.row.skus_count == 0){
                            disabled_status = true;
                        }
                        return h('i-switch', {
                            props: {
                                size: 'large',
                                value: params.row.shelf_status,
                                trueValue: 1,
                                falseValue: 0,
                                disabled: disabled_status
                            },
                            on: {
                                'on-change': () => {
                                    let status = params.row.shelf_status === 1 ? 0 : 1;
                                    this.$ajax.put('/project/shelfStatus', {id: params.row.id, status: status}).then(() => {
                                        this.$Message.success('操作成功');
                                        this.$refs.table.dataList.map(item => {
                                            if (item.id == params.row.id){
                                                item.shelf_status = status;
                                            }
                                            return item;
                                        })
                                        // this.$refs.table.reload();//刷新有问题
                                    }).catch((err) => {
                                        this.$Message.error(err.message || '操作失败');
                                    })
                                }
                            }
                        }, [
                            h('span', {slot: 'open'}, '上架'),
                            h('span', {slot: 'close'}, '下架')
                        ])
                    }
                },
                {
                    title: "操作",
                    align: "center",
                    key: "action",
                    width: 180,
                    render: (h, params) => {
                        return h("div", [
                            h("Button", {
                                props: {
                                    type: "success",
                                    size: "small"
                                },
                                on: {
                                    click: () => {
                                        this.handleGo('project_edit', params.row.id)
                                    }
                                }
                            }, "编辑"),
                            h("Button", {
                                style: {
                                    marginLeft: "5px"
                                },
                                props: {
                                    type: "primary",
                                    size: "small"
                                },
                                on: {
                                    click: () => {
                                        this.handleGo('project_concerts', params.row.id)
                                    }
                                }
                            }, "场次管理"),
                            h("Button", {
                                style: {
                                    marginLeft: "5px"
                                },
                                props: {
                                    type: "error",
                                    size: "small"
                                },
                                on: {
                                    click: () => {
                                        this.handleDelete(params.row);
                                    }
                                }
                            }, "删除")
                        ])
                    }
                }
            ]
        }
    },
    computed: {
        categories() {
            return this.$store.state.data.categories;
        }
    },
    mounted() {
        this.init();
        this.$store.dispatch('getCategories');
    },
    methods: {
        init() {
            this.$ajax.get('/project/tour/index', {params: {pageSize: 100}}).then(res => {
                this.tourLists = res.items
            }).catch(err => {})
        },
        handlFilter() {
            const { filter } = this;
            this.params.keywords = filter.keywords;
            this.params.tour_id = filter.tour_id;
            this.params.category_id = filter.category_id;
            this.params.shelf_status = filter.shelf_status;
            this.$refs.table.init();
        },
        handleDelete(row) {
            this.$Modal.confirm({
                title: "操作提示:",
                width: 320,
                content: `<p>您确定要删除项目‘${row.name}’吗?</p>`,
                onOk: () => {
                    const msg = this.$Message.loading({
                        content: '正在提交删除',
                        duration: 0
                    });
                    this.$ajax.delete('/project/delete', {params: {id:row.id}}).then(() => {
                        msg();
                        this.$Message.success('操作成功');
                        this.$refs.table.reload();
                    }).catch(err => {
                        msg();
                        this.$Message.error(err.message || '操作失败');
                    })
                }
            });
        },
        handleGo(name, id) {
            this.$router.push({name: name, query: {id: id}});
        }
    }
}
</script>